<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-01-30 10:00:54
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24" style="padding: 20px">
            <el-row>
                <el-col :span="6">
                    <el-row>
                        <el-col :span="15" style="padding: 0 5px 0">
                            <el-input :prefix-icon="Search" v-model="key" size="small" clearable></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="default" size="small" @click="getStyles">搜索</el-button>
                        </el-col>
                        <el-col :span="4" :offset="1" style="text-align: right">
                            <el-button class="button" type="success" :icon="Upload" size="small"
                                @click="centerDialogVisible = true">上传</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" class="style-list-container">
                            <el-table :data="tableData" v-loading="tableLoading" style="width: 100%"
                                :height="view.height - 210" size="small" :border="true" highlight-current-row
                                @current-change="handleCurrentChange">
                                <el-table-column :align="'center'" type="index" label="序号" width="60" />
                                <el-table-column :align="''" prop="name" label="样式">
                                    <template #default="scope">
                                        <el-link :type="'primary'" style="font-size: 12px" >{{
                                            scope.row.name
                                        }}</el-link>
                                    </template>
                                </el-table-column>
                                <el-table-column :align="'center'" label="操作" width="90">
                                    <template #default="scope">
                                    <!--  <el-link size="small" style="font-size: 12px" @click.stop="" type="default"
                                            link>编辑</el-link> -->
                                        &nbsp;
                                        <el-link size="small" style="font-size: 12px" @click.stop="" type="primary" link
                                            @click="deleteSld(scope.row)">删除</el-link>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="18" class="style-info">
                    <el-card class="box-card" :style="`height:${view.height - 180}px`">
                        <template #header>
                            <div class="card-header">
                                <span>样式 - {{ currentStyle.workspace.name }} : {{ currentStyle.name }}</span>
                                <el-button-group>
                                    <el-button class="button" type="primary" :icon="Edit" size="small">修改</el-button>
                                </el-button-group>
                            </div>
                        </template>
                        <div>
                            <el-descriptions class="margin-top" :title="currentStyle.name" :column="3" :size="'small'">
                                <el-descriptions-item label="文件名称">{{
                                    currentStyle.filename
                                }}</el-descriptions-item>
                                <el-descriptions-item label="工作区">{{
                                    currentStyle.workspace.name
                                }}</el-descriptions-item>
                                <el-descriptions-item label="格式">{{
                                    currentStyle.format
                                }}</el-descriptions-item>
                                <el-descriptions-item label="版本号">
                                    <el-tag size="small">{{
                                        currentStyle.languageVersion.version
                                    }}</el-tag>
                                </el-descriptions-item>
                            </el-descriptions>
                        </div>
                        <template #footer>
                            <el-row>
                                <el-col :span="24" class="sld-container" :height="view.height - 510">
                                    <!-- <pre>{{ currentSldXml }}</pre> -->
                                    <el-input type="textarea" rows="23" v-model="currentSldXml" readonly>
                                    </el-input>
                                </el-col>
                            </el-row>
                        </template>
                    </el-card>
                </el-col>
            </el-row>

            <el-dialog v-model="centerDialogVisible" title="" width="30%" center>
                <el-form ref="formRef" :model="clfForm" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="样式名称" prop="name" :rules="[{ required: true, message: '名称为必填项' },]">
                        <el-input v-model.number="clfForm.name" type="text" autocomplete="off" clearable />
                    </el-form-item>
                    <el-form-item label="文件上传">
                        <el-upload ref="uploadRef" style="width: 100%;" :file-list="fileList" :data="{ name: clfForm.name }"
                            action="/algorithmApi/sld" :auto-upload="false" drag :limit="1" :on-success="onUploadHandler" :accept="'.clf'" >
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">
                                渲染文件<em>上传</em>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    支持.clf文件后缀
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button size="small" @click="centerDialogVisible = false">取消</el-button>
                        <el-button size="small" type="primary" @click="submitUpload(formRef)">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch, nextTick } from "vue";
import type { UploadInstance, FormInstance } from 'element-plus'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Setting,
    Upload,
    Plus,
} from "@element-plus/icons-vue";
// import * as _ from "lodash";
import { ElMessage, ElMessageBox } from "element-plus";
import HttpService from "@/api/api";

// 设置认证信息
const username = "admin";
const password = "geoserver";
const authString = `${username}:${password}`;
const base64Auth = btoa(authString);

// 构建请求头
const headers = new Headers();
headers.append("Authorization", `Basic ${base64Auth}`);


const uploadRef = ref<UploadInstance>()
const formRef = ref<FormInstance>()
let key = ref("");
let value2 = ref(true);
let tableData = ref([]);
let tableLoading = ref(false);
let currentSldXml = ref('')
let centerDialogVisible = ref(false)
let fileList = ref([])
let currentStyle: any = reactive({
    name: 111,
    workspace: {
        name: "result",
    },
    format: "sld",
    languageVersion: {
        version: "1.0.0",
    },
    filename: "111.sld",
});

const clfForm = reactive({
    name: '',
})

const getStyles = function () {
    let params = {};
    tableData.value.length = 0;
    tableLoading.value = true
    HttpService.sldManage.getStyles(
        params,
        (res) => {
            if (res.status == 200) {
                console.log(res.data);
                res.data.styles.style.map((item, index) => {
                    tableData.value.push(item);
                    tableLoading.value = false
                });
            } else {
                console.log("获取信息失败" + res);
                tableLoading.value = false
            }
        },
        (error) => {
            console.log(error);
            tableLoading.value = false
        }
    );
};
const fetchData = function (val: any) {
    fetch(val.href, {
        method: "GET",
        headers: headers,
    })
        .then((response) => response.json())
        .then((jsonData) => {
            currentStyle.name = jsonData.style.name;
            currentStyle.workspace = jsonData.style.workspace;
            currentStyle.format = jsonData.style.format;
            currentStyle.languageVersion = jsonData.style.languageVersion;
            currentStyle.filename = jsonData.style.filename;
        });
};

const handleCurrentChange = function (val) {
    nextTick(() => {
        fetchData(val);
        getSld(val)
    })
};


const getSld = function (val) {
    let params = {
        name: val.name
    };
    HttpService.sldManage.getSld(
        params,
        (res) => {
            if (res.status == 200) {
                currentSldXml.value = res.data
            } else {
                console.log("获取信息失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
};

const submitUpload = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            uploadRef.value!.submit()
            centerDialogVisible.value = false
        } else {
            console.log('error submit!')
            return false
        }
    })

}
const onUploadHandler = function (res) {
    if (res.success) {
        ElMessage({
            message: "上传成功 ",
            type: "success",
        });
    } else {
        ElMessage({
            message: res,
            type: "error",
        });
    }
    getStyles()
}

const deleteSld = function (val) {
    let params = {
        name: val.name
    };
    HttpService.sldManage.deleteSld(
        params,
        (res) => {
            console.log(res.status)
            if (res.status == 200) {
                ElMessage({
                    message: "删除成功 ",
                    type: "success",
                });
            }
            getStyles();
        },
        (error) => {
            ElMessage({
                message: '删除失败原因:' + error.statusText,
                type: "error",
            });
            getStyles();
        }
    );
};

onMounted(() => {
    getStyles();
});

var view = reactive({
    height: window.innerHeight,
});
</script>
<style lang="scss" scoped>
.style-info {
    padding: 0 0 0 20px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {
        width: 100%;
    }
}

.sld-container {
    width: 100%;
    overflow: auto;
}
</style>
<style lang="scss">
.style-list-container {
    padding: 10px 0 0;

    .current-row {
        .el-table__cell {
            background: var(--el-color-primary-light-3) !important;
            color: var(--el-color-white);
            transition: all 0.5s;

            .el-link {
                color: #fff;
            }
        }
    }

    .el-table__row {
        cursor: pointer;
    }
}
</style>
